import React, { memo,Component,lazy,Suspense } from 'react'
import {baseUrl} from '../../assets/baseUrl'
import { Tabs,Upload, message, Button, Tooltip  } from 'antd'
import TurnBack from '../../components/pageComponents/turnBack'
import { getParam, formatDate, getDateDiff } from '../../utils/tool'
import { StudentInfo } from '../../utils/model'
import {getHomeworkList,getHandleHistory,handlehomework} from '@/api/user'
import { UploadOutlined } from '@ant-design/icons';
// import {withRouter} from "react-router-dom";
import './index.css'
const BaseUrl = baseUrl()
const { TabPane } = Tabs;
// import { NotificationOutlined } from '@ant-design/icons';

class handleHomeWork extends Component{
    static contextType = StudentInfo
    constructor(props) {
        super(props);
        this.state = {
            loading:false,
            numberId:null,
            workDetail:{},  //作业详情
            handleHistory:{},  //提交历史
            workUrl:[],  //文件名,拼接时候用&
            fileDex:1,   //下次上传文件时，文件数量后缀
            schoolId:null,
            classId:null,
            hadSave:true,  //是否保存了
            studentId:null
        }
    }
    ChangeHistory=(url)=>{
        this.props.history.push(url);
    }
    componentDidMount(){
        let numberId = getParam(this.props.location.search, 'numberId')
        getHomeworkList({numberId:numberId}).then(res=>{
            this.setState({
                workDetail:res.data?.data[0]
            })
        })
        this.getHistory()
        this.setState({
            numberId,
            schoolId: this.context?.studentInfo?.schoolId,
            classId: this.context?.studentInfo?.classId,
            studentId: this.context?.studentInfo?.studentId,
        })
    }

    //获取提交记录
    getHistory=()=>{
        let numberId = getParam(this.props.location.search, 'numberId')
        getHandleHistory({numberId:numberId}).then(res=>{
            this.setState({
                handleHistory:res.data?.data[0] || {},
                workUrl:res.data?.data[0]?.workUrl?.split('&') || [],
                fileDex:res.data?.data[0]?.workUrl?.split('&').length+1 || 1
            })
        })
    }
    //提交作业
    handlework=()=>{
        let {numberId,workUrl} = this.state
        let data = {
            numberId,
            workUrl:workUrl.join('&')
        }
        handlehomework(data).then(res=>{
            this.getHistory()
            message.success(res.data?.message)
            this.setState({
                hadSave:true
            })
        })
    }

    //删除作业文件
    deleteUrl=(index)=>{
        let {workUrl,fileDex} = this.state
        workUrl.splice(index,1)
        fileDex = fileDex - 1
        this.setState({
            workUrl,
            hadSave:false,
            fileDex
        })
    }
    render(){
        const {workDetail,handleHistory,fileDex,numberId,workUrl,schoolId,classId,hadSave,studentId} = this.state
        const props = {
                name: 'file',
                action: 'https://www.donglongdong.xyz/api/homework/fileUpload',
                headers: {
                    authorization: localStorage.getItem('uooki-token'),
                },
                data:{numberId:numberId,fileDex:fileDex,useMethod: '上传作业',
                studentId: studentId},
                onChange:(info)=>{
                    if (info.file.status === 'uploading') {
                        //这里就是正在上传中
                        // console.log(info.file, info.fileList);
                    }
                    if (info.file.status === 'done'||info.file.status === "removed") {   //新增或者去除文件时触发
                        let {workUrl,fileDex} = this.state
                        workUrl.push(info.fileList[info.fileList.length-1]?.response)
                        fileDex++
                        this.setState({
                            workUrl,
                            fileDex,
                            hadSave:false
                        })
                        message.success(`${info.file.name} 文件上传成功`);
                    } else if (info.file.status === 'error') {
                        message.error(`${info.file.name} 文件上传失败`);
                    }
                },
            };
        return (
            <div style={{padding:'5vh 5vw 0 5vw'}}>
                <div style={{background:'rgb(255,255,255)',padding:'4vh 0',borderRadius:20}}>
                    <TurnBack url={'/home/class/homework'} notice={hadSave?null:`您本次更改了文件，请先提交作业再返回~`}/>
                    <div className='flex' style={{padding:'5vh 10vw'}}>
                        <div>
                            <ul className='work-detail-li'>
                                <li><span>作业名称：</span>{workDetail?.workName}</li>
                                <li><span>授课老师：</span>{workDetail?.teacherName}</li>
                                <li><span>老师留言：</span>{workDetail?.message}</li>
                                <li><span>截止日期：</span>{workDetail?.endTime}</li>
                                {/* <li>{workDetail?.}</li>
                                <li>{workDetail?.}</li> */}
                            </ul>
                        </div>
                        <div style={{marginLeft:'20vw'}}>
                            <ul className='work-detail-li'>
                                <li><span>提交时间：</span>{handleHistory?.handleTime || '未提交'}</li>
                                <li><span>老师评分：</span>{handleHistory?.mark || '老师暂未打分'}</li>
                                <li><span>老师评语：</span>{handleHistory?.comment || '老师暂未评定'}</li>
                                <div style={{padding:'2vh 2vw'}}>
                                    <Upload {...props} showUploadList={false}>
                                            <Button icon={<UploadOutlined />}>
                                                    上传作业
                                            </Button>
                                    </Upload>
                                    {
                                        workUrl?.map((item,index)=>{
                                            return item==""?null:<div 
                                                        className='file'
                                                        style={{width:'25vw',margin:'5px 0'}}
                                                    >
                                                        <div onClick={()=>window.open(`https://www.donglongdong.xyz/homework/${schoolId}/${classId}/${numberId}/${item}`)} className='inline-block'>
                                                            <i className="iconfont icon-24gl-fileText" style={{margin:'0 10px'}}></i>
                                                            <Tooltip placement="top" title={item}>
                                                                <span className='filename inline-block' style={{width:'16vw'}}>{item}</span>
                                                            </Tooltip>
                                                        </div>
                                                        <i 
                                                            className="iconfont icon-shanchu rabbish" 
                                                            style={{float:'right',marginRight:15}}
                                                            onClick={this.deleteUrl.bind(this,index)}
                                                        ></i>
                                                    </div>
                                        })
                                    }
                                </div>
                            </ul>
                            {
                                !hadSave && <Button onClick={this.handlework.bind(this)}>提交作业</Button>
                            }
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
export default memo(handleHomeWork)